<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Billar</title>
	<link href='<c:url value="/resources/css/cupertino/jquery-ui-1.10.0.custom.css" />' rel="stylesheet" />
   	<!--  Cargar el FrameWork Jquery
   	<script type="text/javascript" src="/resources/js/jquery-1.9.0.js"></script>
   	<script type="text/javascript" src="/resources/js/jquery-ui-1.10.0.custom.js"></script> -->
   	<!-- Cargar plugin JTable 
   	<link href="resources/jtable/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
   	<script type="text/javascript" src="/resources/jtable/jquery.jtable.js" ></script> -->
   	<!-- <script src="${jqueryUrl}" type="text/javascript"> -->
   	<script type="text/javascript" src='<c:url value="/resources/js/jquery-1.9.0.js" />'></script>
    <script type="text/javascript" src='<c:url value="/resources/js/jquery-ui-1.10.0.custom.js" />'></script>
    <link href='<c:url value="/resources/jtable/metro/blue/jtable.css"/>' rel="stylesheet"  />
    <script type="text/javascript" src='<c:url value="/resources/jtable/jquery.jtable.js" />'></script>
    <script type="text/javascript">
        getAlert();
    </script>
   	<script language="javascript" type="text/javascript">
   	$(document).ready(function() {
		 //Prepare jTable
		 alert("hello js");
		 $('#PersonTableContainer').jtable({
				title: 'Tabla de los Programadores',
				actions: {
					listAction:'GenerarTablaProgramadores?action=list',
					createAction:'CrearProgramador?action=create',
		            updateAction: 'ActualizarProgramador?action=update',
		            deleteAction: 'DeleteProgramador?action=delete'
					
				},
				fields: {
					id: {
						title:'id Programador',
						key: true,
						create: false,
						edit: false,
						list: true
					},
					nombre: {
						title: 'Programador',
						width: '40%',
						edit: true
					}
				}
			});
			$('#PersonTableContainer').jtable('load');
		
	});
</script>

</head>
<body>
<form action="GenerarNotaController" method="post">
	
	<p>Datos del cliente</p>
		<p>nombre:		<input name="nombre" type="text" /></p>
		<p>apellido paterno:	<input name="apellidoPaterno" type="text" /></p>
		<p>apellido materno:	<input name="apellidoMaterno" type="text" /></p>
	<p>Consumo:</p>
		<p>refresco		<input name="refresco" type="text"/></p>
		<p>cervezas 	<input name="cerveza" type="text"/></p>
		<p>Ron: 	<input name="ron" type="text"/></p>
		<p>Tequila: 	<input name="tequila" type="text"/></p>
		<p>Vodka 	<input name="vodka" type="text"/></p>
	<br>	
		<input type="submit" value="Compra"/>
	</form>
	<br />
	<form action="billar/generarInventario" method="post">
		<input type="submit" value="Inventario">
	</form>
	<br/>
	<p>Generar Tabla</p>
<br>
	<div id="PersonTableContainer" style="width: 600px;"></div>
	
</body>
</html>